<template>
  <div class="detail-content"
    v-loading="listLoading"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.5)">
    <!-- :class="(index + 1)%2 === 1 ? 'item-left' : 'item-left item-right'"  -->
    <div 
      class="item-left alone" 
      v-for="item in detailInfoList" 
      :key="item.name">
      <span class="item-label">{{item.label}} :</span>
      <span class="item-value">{{item.value}}</span>
    </div>
  </div>
</template>
<script>
  import { ClueResource } from '../axios/index';
  export default {
    name: 'DetailInfo',
    props: {
      id: {
        type: Number,
        default: null
      },
      activeExportName: {
        type: String,
        default: ''
      },
    },
    data () {
      return {
        // 详情列表
        detailInfoList: [
          {
            name: 'reportObject',
            label: '监督对象',
            value: ''
          },
          {
            name: 'reportObjectName',
            label: '监督对象名称',
            value: ''
          },
          {
            name: 'exceptionLogic',
            label: '异常类型',
            value: ''
          },
          {
            name: 'exceptionTypeDesc',
            label: '异常类型说明',
            value: ''
          }
        ],
        listLoading: false
      }
    },
    created () {
    },
    mounted() {
      this.getDetailInfo()
    },
    methods: {
      // 详情数据
      getDetailInfo() {
        this.detailInfoList = [
          {
            name: 'reportObject',
            label: '监督对象',
            value: ''
          },
          {
            name: 'reportObjectName',
            label: '监督对象名称',
            value: ''
          },
          {
            name: 'exceptionLogic',
            label: '异常类型',
            value: ''
          },
          {
            name: 'exceptionTypeDesc',
            label: '异常类型说明',
            value: ''
          }
        ]
        let returnTrue = false;
        setTimeout(() => {
          if(!returnTrue) {
            this.listLoading = true;
          }
        }, 100)
        ClueResource
        .getInfoData({
          id: this.id
        })
        .then(res => {
          returnTrue = true;
          this.listLoading = false;
          if(res.data) {
            for(let key in res.data) {
              if(key === 'map' && res.data.map) {
                let index = 0;
                for(let mapKey in res.data.map) {
                  index += 1;
                  this.detailInfoList.push({
                    name: 'map' + index,
                    label: mapKey,
                    value: res.data.map[mapKey]
                  })
                }
              }
              else if(this.detailInfoList.find(item => item.name === key)) {
                this.detailInfoList.find(item => item.name === key).value = res.data[key]
              }
            }
          }
        })
        .catch(() => {
          returnTrue = true;
          this.listLoading = false;
        })
      },
      // 下载
      downLoad() {
        this.listLoading = true;
        this.$emit('canDownLoad', false);
        ClueResource
        .exportDetail({
          id: this.id
        })
        .then(res => {
          this.listLoading = false;
          this.$emit('modelClose');
          let url = window.URL.createObjectURL(res);
          let a = document.createElement('a');
          a.style.display = 'none';
          a.href = url;
          a.download = `${this.activeExportName}.xlsx`;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          window.URL.revokeObjectURL(url);
          this.$emit('detailModelClose');
        })
        .catch(() => {
          this.listLoading = false;
          this.$emit('modelClose');
        })
      }
    }
  };
</script>
<style lang="scss" scoped>
  .detail-content {
    font-size: 14px;
    color: #2D333C;
    line-height: 24px;
    max-height: calc(70vh - 146px);
    overflow: auto;
    .item-left {
      vertical-align: top;
      display: inline-block;
      // width: 281px;
      width: 50%;
      padding-right: 16px;
      margin-bottom: 16px;
      .item-label {
        width: 155px;
        margin-right: 10px;
      }
      .item-value {
        width: calc(100% - 165px);
      }
    }
    .item-right {
      margin-bottom: 16px;
    }
    .item-left.alone {
      width: 100%;
      padding-right: 0px;
    }
    .item-label {
      font-weight: bold;
      text-align: right;
      display: inline-block;
      vertical-align: top;
    }
    .item-value {
      display: inline-block;
    }
  }
</style>




